<template>
  <div class="converter-container">
    <h1 class="title">⏰ 时间戳转换工具</h1>

    <!-- 当前时间 -->
    <div class="card current-time">
      <h3>🕒 当前时间</h3>
      <div class="time-info">
        <p>时间戳: {{ currentTime.seconds }} 秒 / {{ currentTime.milliseconds }} 毫秒</p>
        <p>格式化时间: {{ currentTime.formatted }}</p>
      </div>
      <button class="btn" @click="refreshTime">🔄 刷新</button>
    </div>

    <!-- 时间戳转日期 -->
    <div class="card">
      <h3>🔢 时间戳 → 日期</h3>
      <div class="input-group">
        <input v-model="timestampInput" placeholder="输入时间戳" class="input" />
        <select v-model="timestampFormat" class="select">
          <option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</option>
          <option value="RFC3339">RFC3339</option>
        </select>
        <button class="btn convert-btn" @click="convertToDate">转换</button>
      </div>
      <p class="result">📅 结果: {{ dateResult }}</p>
    </div>

    <!-- 日期转时间戳 -->
    <div class="card">
      <h3>📅 日期 → 时间戳</h3>
      <div class="datetime-picker">
        <div class="date-input-group">
          <label>日期:</label>
          <input type="date" v-model="selectedDate" class="input date-input" />
        </div>
        <div class="time-input-group">
          <label>时间:</label>
          <input type="time" v-model="selectedTime" step="1" class="input time-input" />
        </div>
        <button class="btn" @click="convertToTimestamp">转换</button>
      </div>
      <p class="preview">当前选择: {{ selectedDateTime }}</p>
      <p class="result">🔢 结果: {{ timestampResult }} 秒</p>
    </div>
  </div>
</template>

<script>
import { GetCurrentTimestamp, DateTimeToTimestamp, TimestampToDateTime } from '../../wailsjs/go/controller/TimestampConverter'

export default {
  data() {
    return {
      currentTime: { seconds: 0, milliseconds: 0, formatted: '' },
      timestampInput: '',
      dateResult: '',
      timestampResult: '',
      timestampFormat: 'YYYY-MM-DD HH:mm:ss',
      selectedDate: '',
      selectedTime: ''
    }
  },
  computed: {
    selectedDateTime() {
      if (!this.selectedDate || !this.selectedTime) return '请选择日期和时间'
      return `${this.selectedDate} ${this.selectedTime}`
    }
  },
  async mounted() {
    await this.refreshTime();
    this.setDefaultDateTime();
  },
  methods: {
    async refreshTime() {
      this.currentTime = await GetCurrentTimestamp();
      this.setDefaultDateTime();
    },
    setDefaultDateTime() {
      const now = new Date();
      this.selectedDate = now.toISOString().split('T')[0];
      
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      this.selectedTime = `${hours}:${minutes}:${seconds}`;
    },
    async convertToDate() {
      this.dateResult = await TimestampToDateTime(
        this.timestampInput,
        this.timestampFormat
      );
    },
    async convertToTimestamp() {
      if (!this.selectedDate || !this.selectedTime) {
        this.timestampResult = '请选择日期和时间';
        return;
      }
      
      const result = await DateTimeToTimestamp(`${this.selectedDate} ${this.selectedTime}`);
      this.timestampResult = result || '无效的日期格式';
    }
  }
}
</script>

<style scoped>
.converter-container {
  max-width: 650px;
  margin: 0 auto;
  padding: 1.2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.9rem;
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
}

.card {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.2rem;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  color: #444;
  font-size: 1.1rem;
}

.time-info p {
  margin: 0.4rem 0;
  font-size: 0.9rem;
}

.input,
.select {
  padding: 7px 10px;
  margin: 0.3rem 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
}

.btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.9rem;
  margin-top: 0.6rem;
}

.btn:hover {
  background-color: #0056b3;
}

.result {
  margin-top: 0.6rem;
  font-weight: bold;
  color: #333;
  padding: 0.4rem;
  background: #e8f4ff;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* 日期时间选择器样式 */
.datetime-picker {
  display: flex;
  gap: 10px;
  margin: 0.5rem 0;
}

.date-input-group, .time-input-group {
  flex: 1;
}

.date-input-group label, .time-input-group label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.9rem;
  color: #555;
}

.date-input, .time-input {
  width: 100%;
  box-sizing: border-box;
}

.preview {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #f0f8ff;
  border-radius: 6px;
  font-size: 0.85rem;
}

/* 时间戳转日期布局优化 */
.input-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.input-group .input {
  flex: 2;
  min-width: 120px;
}

.input-group .select {
  flex: 1;
  min-width: 100px;
}

.input-group .convert-btn {
  flex: 1;
  min-width: 80px;
  margin-top: 0;
}

/* 响应式调整 */
@media (max-width: 500px) {
  .converter-container {
    padding: 0.8rem;
    font-size: 0.85rem;
  }
  
  .datetime-picker {
    flex-direction: column;
    gap: 8px;
  }
  
  .input-group {
    flex-direction: column;
    gap: 6px;
  }
  
  .title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
  .card {
    padding: 0.8rem;
    margin-bottom: 1rem;
  }
}
</style>